<template>
  <div class="ui container layout-content" style="padding-top: 5em; margin-top: 15px;">
    <div class="ui stackable grid">
      <div class="column sixteen wide computer sixteen wide mobile">
        <div class="ui stackable grid">
          <div class="column eleven wide computer sixteen wide mobile">
            <div class="content" id="content">
              <div class="ui segment raised news" id="latest-news" style>
                <transition
                  mode="out-in"
                  enter-active-class="fadeIn"
                  leave-active-class="fadeOut"
                  appear
                >
                  <router-view class="animated"></router-view>
                </transition>
              </div>
            </div>
          </div>
          <div class="column five wide computer only print hidden">
            <ZuiCard @click.native="shift('/personal')"></ZuiCard>
            <ZuiStatus></ZuiStatus>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/mixins/router";
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import ZuiCard from "@/components/ZuiCard.vue";
import ZuiStatus from "@/components/ZuiStatus.vue";
// @ is an alias to /src
export default {
  name: "home",
  mixins: [router],
  components: {
    ZuiCard,
    ZuiStatus
  },
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      img: require("@/assets/images/elliot.jpg")
    };
  },
  computed: {
    ...mapGetters(["sidebar", "authentication"])
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.layout {
  display: flex;
  flex-direction: column;
  flex: auto;
  background: rgb(255, 255, 255);
  min-height: 0;
}
.layout.layout-has-sider {
  flex-direction: row;
}
.layout-sider {
  transition: all 0.2s;
  position: relative;
  background-color: darkseagreen;
  min-width: 0;
  @media (min-width: 992px) {
    flex: 0 0 256px;
    max-width: 256px;
    min-width: 256px;
    width: 256px;
  }
}
.layout-header {
  background: #ffffff;
  padding: 0 50px;
  line-height: 64px;
}
.layout-content {
  background-color: rgb(255, 255, 255);
  flex: auto;
  min-height: 0;
  margin: 0 auto;
}
.layout-footer {
  background: #f0f2f5;
  padding: 24px 50px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}
.pusher {
  min-height: 100%;
  height: 100%;
  position: relative;
}
.ui.card,
.ui.cards > .card {
  border-radius: 0.28571429rem;
  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
  transition: -webkit-box-shadow 0.1s ease, -webkit-transform 0.1s ease;
  transition: box-shadow 0.1s ease, transform 0.1s ease;
}
</style>
